<template>
  <div @click="handleLink" :style="{ color }">
    <slot name="icon"></slot>
    <slot name="title"></slot>
  </div>
</template>
<script>
export default {
  props: {
    // 路径
    path: {
      type: String,
      required: true
    },
    // 活跃路由选中的颜色
    activeColor: {
      type: String,
      default: () => 'red'
    }
  },
  computed: {
    color() {
      return this.$route.path === this.path ? this.activeColor : ''
    }
  },
  methods: {
    handleLink() {
      if (this.$route.path !== this.path) this.$router.replace(this.path)
    }
  }
}
</script>
